import { createBrowserRouter } from "react-router-dom";
import GeekLayout from "@/pages/Layout";
import Login from "@/pages/Login";
import { AuthRoute } from "@/components/AuthRoute";
import { lazy, Suspense } from "react";

// React.lazy() 组件需要在 React.Suspense 组件下进行渲染，
// Suspense 又支持传入 fallback 属性，作为动态加载模块完成前组件渲染的内容。
const Home = lazy(() => import('@/pages/Home'))
const Article = lazy(() => import('@/pages/Article'))
const Publish = lazy(() => import('@/pages/Publish'))

const router = createBrowserRouter([
      {
            path: '/',
            element: <AuthRoute><GeekLayout /></AuthRoute>,
            children: [
                  {
                        path: 'home',
                        element: <Suspense fallback={'加载中'}><Home /></Suspense>,

                  },
                  {
                        path: 'article',
                        element: <Suspense fallback={'加载中'}><Article /></Suspense>
                  },
                  {
                        path: 'publish',
                        element: <Suspense fallback={'加载中'}><Publish /></Suspense>
                  }
            ]
      },
      {
            path: '/login',
            element: <Login />,
      }
])

export default router;